import React from 'react'
import { Select } from 'antd'

import { useMyDispatch, useMySelector, MyShallEqual } from '../../../store'
import { setTheme } from '../../../store/modules/success'

const ThemeSelector: React.FC = () => {
  const { theme } = useMySelector(
    (state) => ({
      theme: state.success.theme
    }),
    MyShallEqual
  )
  const dispatch = useMyDispatch()
  const onChange = (value: string) => {
    dispatch(setTheme(value))
  }

  const onSearch = (value: string) => {
    console.log('search:', value)
  }
  return (
    <Select
      showSearch
      placeholder={theme ? theme : '请选择主题'}
      optionFilterProp="label"
      onChange={onChange}
      onSearch={onSearch}
      options={[
        { label: 'neat-cyan', value: 'cyan' },
        { label: 'awesome-green', value: 'green' },
        { label: 'condensed-night', value: 'night' }
      ]}
      style={{ width: 200, height: 25 }}
    />
  )
}

export default ThemeSelector
